<template>
  <div class="person">
    <el-dialog
      width="600px"
      center
      :before-close="closeDialog"
      title="指定数据采集的设备"
      :close-on-click-modal="false"
      append-to-body
      :visible.sync="addDialogFormVisible"
    >
      <div style="margin-left: -80px">
        <!-- <el-form :inline="true" :model="dataForm" ref="dataForm" class="elformcss">
          <el-form-item>
            <el-button type="primary" @click="searchifo" size="mini">查询</el-button>
          </el-form-item>
        </el-form>-->
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :stripe="true"
          border
          :header-cell-style="headFirst"
          @selection-change="handleSelectionChange"
          :cell-style="(res) => headFirst_col(res, [])"
        >
          <el-table-column type="selection" width="45" align="center"></el-table-column>
          <el-table-column prop="terminalName" label="设备名称" align="center"></el-table-column>
          <el-table-column prop="terminalCode" label="设备编号" align="center"></el-table-column>
          <el-table-column prop="terminalModelName" label="设备型号" align="center"></el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChangepage"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="recordCount"
          ></el-pagination>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addvisible()">取消</el-button>
        <el-button type="primary" @click="addataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addDialogFormVisible: false,
      dataForm: {
        username: '',
        carnumber: ''
      },
      departmentGuid: [],
      deptTree: [],
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      recordCount: 0,
      currentPage: 1,
      searchInfo: {},
      selectarr: [],
      // 时段列表
      roleGuidList: []
    }
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  created() {},
  methods: {
    closeDialog(done) {
      this.addDialogFormVisible = false
      done()
    },
    addvisible() {
      this.departmentGuid = []
      this.tableData = []
      // this.$refs['dataForm'].resetFields()
      this.pageNum = 1
      this.pageSize = 10
      this.recordCount = 0
      this.currentPage = 1
      this.addDialogFormVisible = false
    },
    handleSelectionChange(val) {
      this.selectarr = []
      for (var i = 0; i < val.length; i++) {
        this.selectarr.push(val[i].terminalGuid)
      }
    },
    addataFormSubmit() {
      if (this.selectarr.length < 1) {
        this.$message({
          message: '请选择设备',
          type: 'warning'
        })
        return
      }
      // this.$refs['dataForm'].resetFields()
      this.$emit('refreshDataList', this.selectarr)
      this.addvisible()
      this.addDialogFormVisible = false
    },
    addinit(roleGuidList) {
      this.roleGuidList = roleGuidList
      this.addDialogFormVisible = true
      this.searchifo()
    },
    searchifo() {
      this.pageNum = 1
      this.getdepartmentinfo()
    },

    //获取设备简要信息
    getdepartmentinfo() {
      console.log(this.roleGuidList)
      this.searchInfo = {}
      this.searchInfo.unitGuid = this.changeschoolid
      let url = '/attendance/attendance-frame-unbind-terminal-page'
      if (this.roleGuidList.length == 1) {
        this.searchInfo.roleGuid = this.roleGuidList[0]
      }
      this.$http({
        url: this.$http.adornUrl(url),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.tableData = data.messageContent.data || []
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getdepartmentinfo()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getdepartmentinfo()
    }
  }
}
</script>

<style lang="scss" scoped>
.person {
  /deep/.el-dialog--center .el-dialog__body {
    padding: 20px;
  }
}

.el-form-item {
  margin-bottom: 5px;
}
.page {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>